<template>
    <div class="allbuju">
        <payTop/>
        <div id="payContent">
          <div class="pay1">
            <span class="pay11">缴费系统</span>
            <span class="pay12">缴费记录</span>
            <el-icon color="white" style="float: right; margin-top: 8px;"><List /></el-icon>
          </div>
          <div class="pay2">
            <br/>
            <el-button type="primary" style="background-color: deepskyblue; float: right; border-color: white; margin-right: 7px; margin-top: 15px;" @click="btn">
            <el-icon style="vertical-align: middle; color: white;">
            <Switch />
            </el-icon>
            <span style="vertical-align: middle; color: white;"> 切换 </span>
            </el-button>
            <span>房间编号: 2栋104</span><br/><br/>
            <span>户主姓名: 刘大志</span><br/><br/>        
            <span>联系电话: 183****0954</span>
            <span class="pay21">账户余额：</span>
            <span class="pay22">0.00</span>
          </div>
        </div>
        <div id="feiyong">
          <div class="wuye" @click="jiaona">
            <el-icon :size="50" color="orange" style="float:left;"><OfficeBuilding /></el-icon>
            <span class="en1">物管费</span><br/>
            <el-icon style="float:right; margin-right: 10px;"><ArrowRight /></el-icon>
            <span class="en2">物管费由各项费用统计之和</span>    
          </div>
          <hr/>
          <div class="shui" @click="jiaona2">
            <el-icon :size="50" color="orange" style="float:left;"><Pouring /></el-icon>
            <span class="en1">水费</span><br/>
            <el-icon style="float:right; margin-right: 10px;"><ArrowRight /></el-icon>
            <span class="en2">水费水费水费水费</span>  
          </div>
          <hr/>
          <div class="dian" @click="jiaona3">
            <el-icon :size="50" color="orange" style="float:left;"><Lightning /></el-icon>
            <span class="en1">电费</span><br/>
            <el-icon style="float:right; margin-right: 10px;"><ArrowRight /></el-icon>
            <span class="en2">电费电费电费电费</span>  
          </div>
          <hr/>
          <div class="qifei" @click="jiaona4">
            <el-icon :size="50" color="orange" style="float:left;"><Sunset /></el-icon>
            <span class="en1">天然气费</span><br/>
            <el-icon style="float:right; margin-right: 10px;"><ArrowRight /></el-icon>
            <span class="en2">气费气费气费气费</span>  
          </div>
          <hr/>
          <div class="fanzu" @click="jiaona5">
            <el-icon :size="50" color="orange" style="float:left;"><School /></el-icon>
            <span class="en1">房租</span><br/>
            <el-icon style="float:right; margin-right: 10px;"><ArrowRight /></el-icon>
            <span class="en2">一个月居住的费用</span>  
          </div>
          <hr/>
          <div class="huafei" @click="jiaona6">
            <el-icon :size="50" color="orange" style="float:left;"><PhoneFilled /></el-icon>
            <span class="en1">话费</span><br/>
            <el-icon style="float:right; margin-right: 10px;"><ArrowRight /></el-icon>
            <span class="en2">一个月电话话费</span>  
          </div>
          <hr/>
          <div class="kuandai" @click="jiaona7">
            <el-icon :size="50" color="orange" style="float:left;"><DataLine /></el-icon>
            <span class="en1">宽带光纤</span><br/>
            <el-icon style="float:right; margin-right: 10px;"><ArrowRight /></el-icon>
            <span class="en2">宽带光纤宽带光纤</span>  
          </div>
          <hr/>
        </div>
    </div>
</template>


<script>
import {Switch} from '@element-plus/icons'
import {OfficeBuilding} from '@element-plus/icons'
import {List} from '@element-plus/icons'
import {ArrowRight} from '@element-plus/icons'
import {Pouring} from '@element-plus/icons'
import {Sunset} from '@element-plus/icons'
import {Lightning} from '@element-plus/icons'
import {School} from '@element-plus/icons'
import {PhoneFilled} from '@element-plus/icons'
import {DataLine} from '@element-plus/icons'
import payTop from '@/views/wuye/payTop.vue'  


export default {
  name: 'PaymentOnline',  
  components: {
    payTop,
    Switch,
    List,
    OfficeBuilding,
    ArrowRight,
    Pouring,
    Lightning,
    Sunset,
    School,
    PhoneFilled,
    DataLine
},
methods:{
      jiaona(){
          this.$router.replace('/jiaona')
      },
      jiaona2(){
          this.$router.replace('/jiaona2')
      },
      jiaona3(){
          this.$router.replace('/jiaona3')
      },
      jiaona4(){
          this.$router.replace('/jiaona4')
      },
      jiaona5(){
          this.$router.replace('/jiaona5')
      },
      jiaona6(){
          this.$router.replace('/jiaona6')
      },
      jiaona7(){
          this.$router.replace('/jiaona7')
      },
      btn(){
						
			},
   }
}
</script>

<style lang="less" scoped>
#payContent{
  width: 100%;
  height: 180px;
  background-color:deepskyblue;
}
.pay1>.pay11{
  margin-top: 5px;
  margin-left: 10px;
  float: left;
  color: white;
}
.pay1>.pay12{
  margin-top: 5px;
  margin-right: 10px;
  float: right;
  color: white;
}
.pay2{
  clear: both;
  color: white;
  padding-left: 10px;
}
.pay21{
  float: right;
  margin-right: 55px;
}
.pay22{
  clear: both;
  float: right;
  margin-top: -17px;
  margin-right: 7px;
}
span{
  font-size: 15px;
}

#feiyong{
  height: 500px;
  margin-left: 20px;
  margin-right: 15px;
  margin-top: 25px;
}
hr{
  border: 1px solid #f7f7f7;
  background-color: #f7f7f7;
}
.wuye{
  width: 100%;
  height: 50px;
}
.shui{
  width: 100%;
  height: 50px;
}
.dian{
  width: 100%;
  height: 50px;
}
.qifei{
  width: 100%;
  height: 50px;
}
.fanzu{
  width: 100%;
  height: 50px;
}
.huafei{
  width: 100%;
  height: 50px;
}
.kuandai{
  width: 100%;
  height: 50px;
}
.en1{
  float: left;
  font-size: 14px;
  margin-left: 10px;
}
.en2{
  // float: left;
  font-size: 8px;
  margin-left: 10px;
  color: gray;
}
</style>